sample files/template.html (70 lines of code) (raw):
<!DOCTYPE html>
<html>
<head>
<title>{{ headline }}</title>
<meta charset="utf-8" />
</head>
<body>
<style>
.t-ai2htmlPage {
/*font-family: arial,sans-serif;*/
font-family: georgia,serif;
font-size: 14px;
line-height: 1.2;
color:#333;
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.t-pageTopper,
.t-pageFooter {
position: relative;
width: 100%;
height: 50px;
background-color: #ddd;
letter-spacing: 5px;
}
.t-pageTopper {
margin-bottom:25px;
}
.t-pageFooter {
margin-top:25px;
}
.t-pageTopperText {
text-align: center;
text-transform: uppercase;
font-size:.8em;
height:13px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.t-pageHed {
font-size: 1.8em;
font-weight: normal;
}
.t-pageIntro,
.t-pageNotes,
.t-pageSources,
.t-pageCredits {
margin-top:10px;
}
</style>
<div class="t-ai2htmlPage">
<div class="t-pageTopper">
<p class="t-pageTopperText">Page Topper</p>
</div>
<h1 class="t-pageHed">{{ headline }}</h1>
<p class="t-pageIntro">{{ leadin }}</p>
<div class="g-graphicPartial">
{{ ai2htmlPartial }}
</div>
<p class="t-pageNotes">{{ notes }}</p>
<p class="t-pageSources">{{ sources }}</p>
<p class="t-pageCredits">{{ credit }}</p>
<div class="t-pageFooter">
<p class="t-pageTopperText">Page Footer</p>
</div>
</div>
</body>
</html>